<template>
  <div class="index">
    <!-- 头部区域 :fixed固定定位-->
    <van-nav-bar class="nav-main" title="首页" :fixed="true" />
    <!-- 频道区域  sticky 属性可以开启粘性布局，自动吸顶-->

    <van-tabs sticky :offset-top="46" v-model="active">
      <van-tab
        v-for="(item, index) in channelList"
        :key="index"
        :title="item.name"
      >
        <div class="mianb" @click="btnchannel">
          <van-icon name="bars" />
        </div>
        <!-- 下拉刷新组件 -->
        <van-pull-refresh v-model="item.isLoading" @refresh="onRefresh">
          <!-- 内容区域,使用list组件,可以实现上拉加载更多 -->
          <van-list
            v-model="item.loading"
            :finished="item.finished"
            finished-text="别拉了,我也是有底线的"
            @load="onLoad"
          >
            <!-- {{ active }} -->

            <van-cell
              v-for="(subitem, subindex) in item.articleList"
              :key="subindex"
            >
              <template #title>
                <!-- 文章的标题 -->
                <h3>{{ subitem.title }}</h3>
                <!-- 文章的图片 -->
                <van-grid
                  v-if="subitem.cover.type !== 0"
                  :border="false"
                  :column-num="3"
                >
                  <van-grid-item
                    v-for="(imgitem, imgindex) in subitem.cover.images"
                    :key="imgindex"
                  >
                    <!-- 懒加载lazy-load -->
                    <van-image lazy-load :src="imgitem" />
                  </van-grid-item>
                </van-grid>
                <!-- 文章的其它信息 -->
                <div class="otherbox">
                  <div class="left">
                    <span>{{ subitem.aut_name }}</span>
                    <span>{{ subitem.comm_count }} 条评论</span>
                    <span>{{ subitem.pubdate | fromtime }}</span>
                  </div>
                  <div class="right">
                    <van-icon name="cross" @click="chaa(subitem)" />
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>

    <!-- 频道下的弹出层 -->
    <channel ref="channel" :channelList="channelList" :active.sync="active" />
    <more ref="more" :artidList="artidList" @delsc="delsc" :leheiid="leheiid" />
  </div>
</template>

<script>
/*
   文章的数组完成
    1.文章的标题:因为里面有标题和图片,可以用temponent插槽来包起来,标题h3,.title直接渲染
    2.图片,vant里面找宫格,
    3.文章的作者 & 评论数 & 发布日期    更多操作按钮 可以分为左右两边,利用flex布局来调样式
 */
import more from './channel/more'
import channel from './channel/channel.vue' // 频道的弹出框
import { apiGetChannelsList, apiGetArticle } from '@/api/index.js' // 导入频道列表
import { getLocal } from '@/utils/local.js' // 工具型方法
// 图片的懒加载
import Vue from 'vue'
import { Lazyload } from 'vant'
Vue.use(Lazyload)
export default {
  components: {
    channel, // 频道
    more // 拉黑
  },
  data () {
    return {
      // loading: false, // list组件是否处于加载, true正在加载,false已加载完成
      // finished: false, // list 组件中的数据源是否加载完毕： true 数据源加载完毕没有更多了 & false 数据没有加载完毕，还可以继续加载
      // list: [], // 遍历的数据源
      // isLoading: false, // refresh组件是否处于加载状态, true加载, false加载完成.
      channelList: [], // 主页的频道列表(推荐)
      active: 0, // 当前选中频道的下标
      artidList: 0, // 当前要操作的文章id
      leheiid: 0 //拉黑作者的id
    }
  },
  methods: {
    // 根据id删除不喜欢文章列表
    delsc (artidList) {
      // 获取当前点击的频道列表id
      const articleList = this.channelList[this.active].articleList
      // 循环遍历
      articleList.forEach((item, index) => {
        // 判断子页面的要操作的文章id跟本页面的文章id是否一样
        if (item.art_id === artidList) {
          articleList.splice(index, 1)
        }
      })
    },
    // 拉黑弹出框
    chaa (subitem) {
      // console.log('拉黑弹出框', subitem)
      this.artidList = subitem.art_id
      this.$refs.more.show = true
      this.leheiid = subitem.aut_id
    },
    // 频道的弹出框方法
    btnchannel () {
      this.$refs.channel.show = true
    },
    // 会在list加载时执行,一加载内容区域就会执行
    async onLoad () {
      // console.log('onLoad')
      // 得到当前选中的频道数据下标(下标要加[])
      const currenChannel = this.channelList[this.active]
      // console.log('当前频道:1111', this.channelList[this.active])
      // 得到当前选中频道的 id
      const id = currenChannel.id
      // 根据id 发送请求到服务器,得到当前选中频道的新闻列表
      const res = await apiGetArticle(id)
      // 2.页面一直的发疯的请求数据,解决办法保存新闻数据到当前的频道中,得到数据之后,将新的数据和老的数据进行...拼接
      currenChannel.articleList = [
        ...currenChannel.articleList,
        ...res.data.data.results
      ]
      // console.log('新闻数据:', res)
      // 1.将list组件的加载状态手动设置为false(解决一直转圈问题)
      currenChannel.loading = false
      // 3.判断返回的数据长度是否为0,解决切换到下一频道会一直请求的问题
      if (res.data.data.results.length === 0) {
        //  说明数据已经加载完毕(到别的页面不会一直的转圈,会显示我也是有底线的)
        currenChannel.finished = true
      }
    },
    // 在refresh 下拉刷新时触发
    onRefresh () {
      //  4.得到当前频道
      const currenChannel = this.channelList[this.active]
      // 5.页面一刷新要清除当前频道下的所有
      currenChannel.articleList = []
      // 6.将list的loading改为true
      currenChannel.loading = true
      // 7.重新加载文章数据
      this.onLoad()
      // 8.将isLoading改为false(加载完成,下拉不会一直转圈)
      currenChannel.isLoading = false
      // 9.将finished改为false(有数据可以一直加载)
      currenChannel.finished = false

      // // 往下拉的时候要先清空list里面的数据,长度为0,在执行onLoad事件,把之前应该显示的内容在加载出来
      // this.list = []
      // this.onLoad()
      // // 将iSLoading设置为false list的加载更多finished设置为false
      // this.isLoading = false
      // this.finished = false
    },
    // 定义一个方法,调用网络请求来存频道列表
    async getapichannels () {
      // 先得到token,在判断是否存在token里面的两个参数和token
      const token = getLocal('token')
      if (token && token.token) {
        // 如果登录,直接利用请求获取当前的频道数据
        const res = await apiGetChannelsList()
        this.channelList = res.data.data.channels // [{id: '', name: ''}]
      } else {
        // 获取已经编辑存在localst中的数据了,可以新增可以移除
        const mychannels = getLocal('channels')
        //  如果未登录,判断localstorage中是否有编辑过的数据
        if (mychannels) {
          // 如果存在直接取出渲染
          this.channelList = mychannels
        } else {
          // 如果不存在,从服务器取出默认数据(也是你不曾更改过的)
          const res = await apiGetChannelsList()
          this.channelList = res.data.data.channels
        }
      }
      // 添加额外属性
      this.addOtherProp()
    },
    addOtherProp () {
      // 添加一个额外的属性,为了各个页面都能显示不同的文章,利用循环遍历得到每个属性
      this.channelList.forEach(item => {
        // 添加额外属性: 没有响应式的特点
        // item.loading = false
        // item.finished = false
        // item.isLoading = false
        // item.articleList = []
        this.$set(item, 'loading', false)
        this.$set(item, 'finished', false)
        this.$set(item, 'isLoading', false)
        this.$set(item, 'articleList', [])
      })
      // console.log('频道区域:', this.channelList)
    }
  },
  // 初始化一定要调用,不然列表频道的数据显示不出来,注意点一般用户信息都是要放到初始化
  created () {
    this.getapichannels()
  }
}
</script>

<style lang="less">
.index {
  margin-bottom: 50px; // 可以看到我也是有底线的
  margin-top: 46px; // 为了看到上频道的固定导航
  // /deep/ 深度选择器：如果希望 scoped 中的样式影响子组件可以使用：尝试选择器..
  /deep/ .nav-main {
    background-color: #3296fa;
    .van-nav-bar__title {
      color: honeydew;
    }
  }
  /deep/ .mianb {
    width: 10%;
    height: 44px;
    position: fixed;
    background-color: skyblue;
    top: 46px;
    right: 0;
    z-index: 999;
    text-align: center;
    line-height: 44px;
  }
  /deep/ .van-sticky {
    width: 90%;
  }
  .otherbox {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    // color: pink;
    .left {
      span {
        margin-right: 10px;
      }
    }
    .right {
      border: 1px solid #999;
      width: 24px;
      height: 18px;
      text-align: center;
      line-height: 24px;
      background-color: skyblue;
    }
  }
}
</style>
